<template>
    <div class="ScrollX_box">
       <div class="scroll_item "  :class="propValue.active_animation?'scroll_item_active':''" v-for="(item,i) of propValue.list" :key="i" :style="SetStyle(propValue)">
            <div>
                <img :src="item.img" alt="" :style="imgStyle(propValue)">
            </div>
            <div :style="titleStyle(propValue)">{{item.title}}</div>
            <div :style="contentStyle(propValue)">{{item.content}}</div>
       </div>
    </div>
</template>

<script>
export default {
  name: "MobileScrollX",
  props: {
    propValue: {
      type: Object,
      default: () => {},
    },
    swiperList: {
      type: Array,
      default: () => {},
    },
    element: {
      type: Object,
      default: () => {},
    },
  },

  methods:{
    SetStyle(value){
        console.log(value)
        return{
            width:value.itemWidth+'rem',
            height:value.itemHeight+'rem',
            'border-radius':value.borderRadius+'rem',
            'background':value.itemBg,
            'margin-left':value.itemMarginBetween+'rem',
            'margin-right':value.itemMarginBetween+'rem',
            'box-shadow':value.boxShadow ? '0px 4px 32px 1px rgba(0,0,0,0.18)' : ''
        }
    },
    titleStyle(value){
        return{
            'margin-left':value.titleLeft+'rem',
            'margin-top':value.titleTop+'rem',
            'font-size':value.titleSize+'rem',
        }
    },
     contentStyle(value){
        return{
            'margin-left':value.contentLeft+'rem',
            'margin-top':value.contentTop+'rem',
            'font-size':value.contentSize+'rem',
            'padding':'0 8rem',
            "white-space": "normal"
        }
    },
    imgStyle(value){
         return{
            width:value.imgwidth+'rem',
            height:value.imgheight+'rem',
            'margin-top':value.imgTop+'rem',
            'margin-left':value.imgleft+'rem',
        }
    },
  }
}
</script>

<style lang="scss" scoped>
    .ScrollX_box{
        width: 100%;
         white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    transition: .3s;
    .scroll_item{
        display: inline-block;
    transition: .3s;
    position: relative;
    top: 50%;
// box-shadow: 0px 4px 32px 1px rgba(0,0,0,0.15);
    transform: translateY(-50%);
    }
    .scroll_item_active:active{
         top: 50%;
        transform: translateY(-50%) scale(1.2);
        // transform: scale(1.2);
    }
    }
</style>
